<template>
  <div class="block">
    <px-dialog v-model="dialogVisible" title="新增日程" width="50%" align-center>
      <px-form ref="checkFormRef" :inline="false" :model="formValue" label-position="right" label-width="100px">
        <px-form-item label="日程描述" prop="taskTitle" :rules="[{ required: true, message: '日程描述不能为空', trigger: 'change' }]">
          <px-input
            v-model="formValue.taskTitle"
            type="textarea"
            placeholder="请输入日程描述"
            :autosize="{ minRows: 3, maxRows: 4 }"
            maxlength="500"
            clearable
          />
        </px-form-item>
        <px-form-item
          label="日程时间"
          prop="taskTime"
          :rules="[
            { required: true, message: '日程时间不能为空', trigger: 'change' },
            { validator: validatorTaskTime, trigger: 'change' }
          ]"
        >
          <px-date-picker :disabled-date="disabledDate" v-model="formValue.taskTime" type="date" placeholder="请选择日期" clearable />
        </px-form-item>
      </px-form>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="dialogVisible = false">取消</px-button>
          <px-button type="primary" :loading="loading" @click="handleSubmit">提交</px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { PxMessage } from "px-ui";
import { createTask } from "@/api/bench";
import dayjs from "dayjs";
const dialogVisible = defineModel("dialogVisible");
// 表单
const checkFormRef = ref();
// 表单的值
const formValue = ref<{ taskTitle?: string; taskTime?: string }>({});
const emits = defineEmits(["refresh"]);
const props = defineProps(["day", "desc", "customSubmit"]);
watchEffect(() => {
  formValue.value.taskTime = props.day;
  formValue.value.taskTitle = props.desc;
});
watchEffect(() => {
  if (!dialogVisible.value) {
    checkFormRef.value?.resetFields();
  }
});
const loading = ref(false);
// 提交
const handleSubmit = async () => {
  checkFormRef.value.validate(async valid => {
    if (valid) {
      loading.value = true;
      const { taskTitle, taskTime } = formValue.value;
      try {
        if (props.customSubmit) {
          await props.customSubmit({ taskTitle, taskFinishTime: dayjs(taskTime).format("YYYY-MM-DD 23:59:59") });
        } else {
          await createTask({ taskTitle, taskFinishTime: dayjs(taskTime).format("YYYY-MM-DD 23:59:59") });
        }
        emits("refresh", true);
        loading.value = false;
        dialogVisible.value = false;
        PxMessage.success("新增成功");
      } catch (error) {
        loading.value = false;
      }
    }
  });
};
const validatorTaskTime = (rule: any, value: any, callback: any) => {
  // console.log(value, "value");
  const targetTime = dayjs(value).format("YYYYMMDD");
  const today = dayjs().format("YYYYMMDD");
  if (targetTime > today || targetTime === today) {
    callback();
  } else {
    callback(new Error("日程时间不能早于今天"));
  }
};
const disabledDate = value => {
  const targetTime = dayjs(value).format("YYYYMMDD");
  const today = dayjs().format("YYYYMMDD");
  return targetTime < today;
};
</script>
<style lang="scss" scoped>
.inspect-form {
  margin-bottom: 8px;

  :deep(.px-form-item) {
    width: 100%;
    margin-bottom: 8px;

    .px-input {
      width: 100%;
    }

    .px-select {
      width: 100%;
    }

    .px-select-v2 {
      width: 100%;
    }
  }

  :deep(.px-button + .px-button) {
    margin-left: 8px;
  }
}

.inspect-table-btn {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

  :deep(.px-button + .px-button) {
    margin-left: 0;
  }
}
</style>
